import React from "react";
import 'styles/components/iphone-x.scss'

class IPhoneX extends React.Component {
  render() {
    const { className, type, title } = this.props;
    return (
      <div className={`fake-phone ${className || ""}`}>
        {type === 'iPhoneX' && (
          <div className="iPhoneX">
            <div className='inner-shadow'/>
            <div className="notch">
              <div className="camera"/>
              <div className="speaker"/>
            </div>
            <div className='skeleton-bar up-bar'/>
            <div className='skeleton-bar under-bar'/>
            <div className="overflow">
              <div className="shadow shadow--tr"/>
              <div className="shadow shadow--tl"/>
              <div className="shadow shadow--br"/>
              <div className="shadow shadow--bl"/>
            </div>
            <div className='button volume'/>
            <div className='button sleep'/>
            <div className='screen'>
              <div className='navigation-bar-title'>{title || ""}</div>
              <div className='screen-content'>
               {this.props.children}
              </div>
            </div>
          </div>
        )}
       </div>
    )
  }
}

IPhoneX.propTypes = {
  className: React.PropTypes.string,
  title: React.PropTypes.string,
  type: React.PropTypes.string.isRequired
};

IPhoneX.defaultProps = {
  style: {}
};

export default IPhoneX;
